import React, { useState } from 'react';
import {
  Input,
  DatePicker,
  Button,
  Table,
  Pagination,
  Space,
  Popconfirm,
  Tag,
} from 'antd';
import {
  SearchOutlined,
  PlusOutlined,
  FileTextOutlined,
} from '@ant-design/icons';
import PublicModal from '../../component/publicModal/PublicModal';

const { RangePicker } = DatePicker;



const Kcyiwei = () => {

  // 表单显示
  const [visibity, setVisibity] = useState(false);
  // 表单标题
  const [title, setTitle] = useState('新增出库单');

  // 表单配置项
  const formItems = []
  // 搜索处理函数
  const handleSearch = () => {
    console.log('执行搜索操作');
    // 这里可添加实际搜索逻辑，如根据表单值过滤表格数据等
  };

  // 重置处理函数
  const handleReset = () => {
    console.log('执行重置操作');
    // 这里可添加重置表单逻辑
  };

  // 模拟表格数据
  const dataSource = [
    {
      key: '1',
      shiftNumber: 'Y20200629001',
      status: '初始录入',
      details: { hasNumber: true, number: 1, hasPlus: true },
      sourceLocation: 'A-2-001',
      targetLocation: 'A-2-003',
      remarks: '商品移库',
      createDate: '2017-07-19 14:48:38',
      creator: 'admin',
    },
    {
      key: '2',
      shiftNumber: 'Y20200629001',
      status: '初始录入',
      details: { hasNumber: true, number: 2, hasPlus: true },
      sourceLocation: 'A-2-001',
      targetLocation: 'A-2-003',
      remarks: '',
      createDate: '',
      creator: '',
    },
    {
      key: '3',
      shiftNumber: 'Y20200629001',
      status: '初始录入',
      details: { hasNumber: true, number: 3, hasPlus: true },
      sourceLocation: 'A-2-001',
      targetLocation: 'A-2-003',
      remarks: '',
      createDate: '',
      creator: '',
    },
    {
      key: '4',
      shiftNumber: 'Y20200629001',
      status: '移库完成',
      details: { hasNumber: true, number: 4, hasPlus: false },
      sourceLocation: 'A-2-001',
      targetLocation: 'A-2-003',
      remarks: '',
      createDate: '',
      creator: '',
    },
    {
      key: '5',
      shiftNumber: 'Y20200629001',
      status: '初始录入',
      details: { hasNumber: false, hasPlus: false },
      sourceLocation: 'A-2-001',
      targetLocation: 'A-2-003',
      remarks: '',
      createDate: '',
      creator: '',
    },
  ];

  // 表格列配置
  const columns = [
    {
      title: '',
      dataIndex: 'check',
      render: () => <Input type="checkbox" style={{ marginLeft: 8 }} />,
    },
    {
      title: '移位编号',
      dataIndex: 'shiftNumber',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '明细',
      dataIndex: 'details',
      render: (details) => {
        if (!details.hasNumber) return null;
        return (
          <Space>
            <Tag color="yellow" style={{ borderRadius: '50%', width: 20, height: 20, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {details.number}
            </Tag>
            <FileTextOutlined />
            {details.hasPlus && <PlusOutlined style={{ backgroundColor: '#000', color: '#fff', borderRadius: '50%', padding: '4px' }} />}
          </Space>
        );
      },
    },
    {
      title: '源库位',
      dataIndex: 'sourceLocation',
    },
    {
      title: '目标库位',
      dataIndex: 'targetLocation',
    },
    {
      title: '备注',
      dataIndex: 'remarks',
    },
    {
      title: '创建日期',
      dataIndex: 'createDate',
    },
    {
      title: '创建人',
      dataIndex: 'creator',
    },
    {
      title: '操作',
      render: () => {
        return (
          <Space>
            <Button onClick={() => {
              setVisibity(true)
              setTitle('编辑移位')
            }}>编辑</Button>
            <Popconfirm title="确定删除吗？" okText="确定" cancelText="取消">
              <Button>删除</Button>
            </Popconfirm>
          </Space>
        )
      }
    }
  ];

  return (
    <div style={{ padding: '20px' }}>
      {/* 搜索区域 */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          marginBottom: '20px',
          justifyContent: 'space-between',
        }}
      >
        <Space>
          <Input
            placeholder="请输入移位单号"
            prefix={<SearchOutlined />}
            style={{ width: 150 }}
          />
          <span>移位时间:</span>
          <RangePicker style={{ marginRight: 10 }} />
        </Space>
        <Space>
          <Button type="primary" onClick={handleSearch}>搜索</Button>
          <Button onClick={handleReset}>重置</Button>
        </Space>
      </div>

      {/* 操作按钮区域 */}
      <Space style={{ marginBottom: '20px' }}>
        <Button type="primary" icon={<PlusOutlined />} onClick={() => {
          setVisibity(true)
          setTitle('新增移位')
        }}>
          添加移位
        </Button>
      </Space>

      {/* 表格区域 */}
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={false} // 关闭表格自带分页，使用下方自定义分页
        scroll={{ x: 'scroll' }} // 横向滚动
      />

      {/* 分页区域 */}
      <div style={{ marginTop: '20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Pagination
          defaultCurrent={1}
          total={12} // 总数据量，示例中可根据实际调整
          pageSize={10} // 每页条数

        />
        <Space>
          <span>10条/页</span>
          <span>跳至</span>
          <Input type="text" defaultValue="5" style={{ width: 50, textAlign: 'center' }} />
          <span>页</span>
        </Space>
      </div>
      <PublicModal formItems={formItems} visibity={visibity} setVisibity={setVisibity} title={title} />
    </div>
  );
};

export default Kcyiwei;